import { Form, Input, Modal, Select, TreeSelect } from 'antd';
import { RoleData } from '@/types/sys';
import { addRole, updateRole } from '@/api/sys';

const Dialog = (props: {
  visible: boolean;
  title: string;
  treeSource: Array<unknown>;
  record: RoleData | null;
  onSuccess: () => void;
  onCancel: () => void;
}) => {
  const { visible, title, onCancel, record, onSuccess, treeSource } = props;
  const [form] = Form.useForm();
  useEffect(() => {
    if (!visible) {
      form.resetFields(); // 关闭对话框时重置表单
    } else if (record) {
      form.setFieldsValue(record);
    } else {
      form.setFieldsValue({ status: '1' });
    }
    // 移除 else 分支，这样当 record 为 null 时不会重置表单
  }, [visible, record, form]);
  const onFinish = async (values: RoleData) => {
    if (record?.id) {
      const data = {
        id: record.id,
        ...values,
      };

      const result = await updateRole(data);
      if (!result) return;
      console.log(result);
    } else {
      console.log('新增', values);
      const result = await addRole(values);
      console.log(result);
    }
    onSuccess();
    onCancel();
  };
  const onOk = () => {
    form.validateFields().then((values: RoleData) => {
      onFinish(values);
    });
    onCancel();
  };
  const onCancel1 = () => {
    form.resetFields(); // 重置表单
    onCancel();
  };
  const onChange = (value: string) => {
    console.log(value);
  };
  return (
    <Modal title={title} open={visible} onOk={onOk} onCancel={onCancel1}>
      <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        <Form.Item label="父级菜单" name="parent_id">
          <TreeSelect
            showSearch
            style={{ width: '100%' }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            placeholder="Please select"
            allowClear
            treeDefaultExpandAll
            onChange={onChange}
            treeData={treeSource}
          />
        </Form.Item>
        <Form.Item
          label="菜单名称"
          name="label"
          rules={[{ required: true, message: '请输入菜单名称' }]}
        >
          <Input placeholder="请输入菜单名称" />
        </Form.Item>
        <Form.Item label="路径" name="key">
          <Input placeholder="请输入路径" />
        </Form.Item>
        <Form.Item label="类型" name="type">
          <Select>
            <Select.Option value="1">目录</Select.Option>
            <Select.Option value="2">菜单</Select.Option>
            <Select.Option value="3">按钮</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="图标" name="icon">
          <Input placeholder="请输入图标" />
        </Form.Item>
        <Form.Item label="文件所在路径" name="file_path">
          <Input placeholder="请输入文件所在路径" />
        </Form.Item>
        <Form.Item label="状态" name="status">
          <Select placeholder="请选择状态">
            <Select.Option value="1">启用</Select.Option>
            <Select.Option value="0">禁用</Select.Option>
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default Dialog;
